<template>
  <div class="video">
    <div class="page6__36BQ8">
      <div class="swiper__E5klS">
        <div class="content_wrapper__1hd-K">
          <ul class="content__3jQU-">
            <div v-for="(item, index) of imgList" :key="index">
              <li v-if="activeIndex === index">
                <div style="background-image: url('@/assets/img/games/ag.png')">
                  <div class="page6_box__U2hji">
                    <div class="fadeInLeft left__v28fs">
                      <img draggable="false" :src="item.leftUrl" alt="banner" />
                    </div>
                    <div class="fadeInRight right__3tqgZ">
                      <img
                        v-if="item.rightUrl"
                        draggable="false"
                        :src="item.rightUrl"
                        alt="banner"
                      /><span class="enter__1FfcG" @click="goGames"
                        >进入游戏</span
                      >
                    </div>
                  </div>
                </div>
              </li>
            </div>
          </ul>
        </div>
        <ul class="page6List__VO_Gs">
          <li class="on__1-D6M">AG国际馆</li>
          <li>DG视讯</li>
          <li>BG视讯</li>
          <li>PM真人视讯</li>
          <li>BBIN视讯</li>
          <li>EBET视讯</li>
          <li>ASTAR视讯</li>
        </ul>
      </div>
    </div>
    <ul class="page6List__VO_Gs">
      <li
        :class="activeIndex === index ? 'on__1-D6M' : ''"
        v-for="(item, index) of list"
        :key="index"
        @click="activeIndex = index"
      >
        {{ item.name }}
      </li>
    </ul>
    <LoginDialog
      v-if="isShow"
      @close="
        () => {
          isShow = false;
        }
      "
    />
  </div>
</template>
<script>
import LoginDialog from "@/components/loginDialog.vue";
export default {
  name: "video",
  components: { LoginDialog },
  data() {
    return {
      list: [
        {
          name: "AG国际馆",
        },
        {
          name: "DG视讯",
        },
        {
          name: "BG视讯",
        },
        {
          name: "PM真人视讯",
        },
        {
          name: "BBIN视讯",
        },
        {
          name: "EBET视讯",
        },
        {
          name: "ASTAR视讯",
        },
      ],
      isShow: false,
      imgList: [
        {
          leftUrl: require("@/assets/img/games/ag.png"),
          rightUrl: require("@/assets/img/games/wdAG.08d337b2.png"),
        },
        {
          leftUrl: require("@/assets/img/games/peoDG.b4fa7aaf.png"),
          rightUrl: require("@/assets/img/games/wdDG.d4f4e810.png"),
        },
        {
          leftUrl: require("@/assets/img/games/peoBGZR.cbb74cea.png"),
          rightUrl: require("@/assets/img/games/wdBGZR.67c5d81d.png"),
        },
        {
          leftUrl: require("@/assets/img/games/peoIGZR.829f9d1f.png"),
          rightUrl: require("@/assets/img/games/wdOBG.3a1f248d.png"),
        },
        {
          leftUrl: require("@/assets/img/games/peoBBIN.d0a87447.png"),
          rightUrl: require("@/assets/img/games/wdBBIN.1baf86f5.png"),
        },
        {
          leftUrl: require("@/assets/img/games/peoEBET.f9220fd4.png"),
          rightUrl: require("@/assets/img/games/wdEBET.584017e3.png"),
        },
        {
          leftUrl: require("@/assets/img/games/peoIGZR.829f9d1f.png"),
          rightUrl: "",
        },
      ],
      activeIndex: 0,
    };
  },
  methods: {
    goGames() {
      let isLogin = localStorage.getItem("TOKEN") ? true : false;
      if (!isLogin) {
        this.isShow = true;
      }
    },
  },
};
</script>
<style lang="less" scoped>
.video {
  width: 100%;
  background: url("../../../assets/img/games/bgAG.b533be67-n.png") no-repeat;
  background-size: 100% auto;
  z-index: 9999;
  position: relative;
  .page6__36BQ8 {
    width: 1200px;
    margin: 0 auto;
    position: relative;
    height: 835px;
    .swiper__E5klS {
      display: flex;
      justify-content: center;
      width: 100%;
      height: 100%;
      position: relative;
      .content_wrapper__1hd-K {
        width: 100%;
        height: 100%;
        overflow: hidden;
        li {
          width: 100%;
          cursor: pointer;
          user-select: none;
          .page6_box__U2hji {
            width: 1200px;
            margin: 0 auto;
            position: relative;
            height: 835px;
            .left__v28fs {
              float: left;
              width: 50%;
              height: 82%;
              position: relative;
              img {
                height: 100%;
              }
            }
            .right__3tqgZ {
              position: relative;
              height: 76%;
              float: right;
              width: 50%;
              padding-top: 60px;
              img {
                height: 100%;
              }
              .enter__1FfcG {
                display: block;
                position: absolute;
                left: 50%;
                transform: translateX(-50%);
                cursor: pointer;
                top: 350px;
                width: 230px;
                height: 60px;
                border-radius: 30px;
                text-align: center;
                line-height: 60px;
                background: linear-gradient(90deg, #513316, #261604);
                color: #fff;
                font-weight: 700;
                font-size: 24px;
                box-shadow: 0 0 15px rgba(81, 51, 22, 0.6);
                animation: abc__3LsIq linear infinite 1s;
              }
            }
          }
        }
      }
    }
  }
  .page6List__VO_Gs {
    z-index: 1;
    width: 100%;
    position: absolute;
    bottom: 325px;
    text-align: center;
    li {
      color: #513316;
      font-size: 16px;
      display: inline-block;
      width: 105px;
      height: 44px;
      margin: 0 8px;
      text-align: center;
      line-height: 44px;
      border-radius: 10px;
      background: -webkit-gradient(
        linear,
        left top,
        left bottom,
        from(#ffe9be),
        to(#ffc148)
      );
      background: -o-linear-gradient(#ffe9be, #ffc148);
      background: linear-gradient(#ffe9be, #ffc148);
      -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
      cursor: pointer;
    }
    li.on__1-D6M,
    li:hover {
      background: -webkit-gradient(
        linear,
        left top,
        left bottom,
        from(#513316),
        to(#261604)
      );
      background: -o-linear-gradient(#513316, #261604);
      background: linear-gradient(#513316, #261604);
      color: #fff;
    }
  }
}
</style>
